<template>
  <div id="single-blog">
    <h1>{{ blog.title }}</h1>
    <article>{{ blog.content }}</article>
    <p>作者：{{ blog.author }}</p>
    <p>分类：</p>
    <ul>
      <li v-for="(category, id) in blog.categories" :key="id">
        {{ category }}
      </li>
    </ul>
    <button @click="deleteSingleBlog()">删除</button>
    <router-link :to="'/edit/' + id">编辑</router-link>
  </div>
</template>

<script>
export default {
  name: "single-blog",
  data() {
    return {
      id: this.$route.params.id,
      blog: {},
    };
  },
  created() {
    this.$http
      .get(
        "https://vuedemo-1c74b-default-rtdb.firebaseio.com/posts/" +
          this.id +
          ".json"
      )
      .then(function (data) {
        //console.log(data);
        //this.blog = data.body;
        return data.json();
      })
      .then(function (data) {
        this.blog = data;
      });
  },
  methods: {
    deleteSingleBlog() {
      this.$http
        .delete(
          "https://vuedemo-1c74b-default-rtdb.firebaseio.com/posts/" +
            this.id +
            ".json"
        )
        .then((response) => {
          this.$router.push({ path: "/" });
        });
    },
  },
};
</script>

<style scoped>
#single-blog {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background: #eee;
  border: 1px dotted #aaa;
}
/* router-link {
  display: inline-block;
} */
a {
  text-decoration: none;
  color: black;
  display: inline-block;
  margin-left: 20px;
  border: 1px solid gray;
}
</style>